<template>
  <div class="my-collect">
  	<shop-header ref="shopHeader">	
			<h2>我的收藏</h2>	
		</shop-header>
		<div class="collect-wrapper">
			<div class="fav-count" v-if="collectList.length>0">您关注了<span class="fav-length"> {{ collectList.length }} </span>个商品 <span class="edit" @click="isEdit = !isEdit">编辑</span></div>
			<ul class="collect-list">
				<router-link class="collect-item" :to="{ path: '/goods/detail', query: { id: item._id } }" tag="li" v-for="item in collectList" :key="item.id">
					<div class="check" v-if="isEdit">
						<div class="check-icon" @click.stop="checked(item)">
							<x-icon fill="#f23030" type="ios-checkmark" v-if="item.check" size="24"></x-icon>
              <x-icon style="fill: #999" type="ios-circle-outline" v-if="!item.check" size="24"></x-icon>
						</div>
					</div>
					<div class="item-container" :style="{ left: isEdit?'30px':'auto' }">
						<div class="collect-cover">
							<span class="img-holder"><img class="obj-cover" :src="item.goodsCover"></span>
						</div>
						<div class="content">
							<h3 class="product-name">{{ item.goodsName }}</h3>
							<p class="params">颜色：白色</p>
							<div class="price">
								<span class="price_val"><i>¥</i>{{ item.price | toDecimal }}</span>
								<span class="view_more">查看相似</span>
							</div>
						</div>
					</div>
				</router-link>
			</ul>
		</div>
		<div class="fav-fixbar-wrapper" v-if="isEdit">
			<div class="fav-fixbar">
				<div class="fav-select">
					<span class="fav-evt-warpper" @click="allCheck(collectList)">
						<span class="check-icon">
							<x-icon fill="#f23030" type="ios-checkmark" v-if="allCheckStatus" size="24"></x-icon>
              <x-icon style="fill: #999" type="ios-circle-outline" v-if="!allCheckStatus" size="24"></x-icon>
              <em>全选</em>
						</span>
					</span>
				</div>
				<div class="unFavourite">
					<span class="unfav-btn" @click="unFavourite">取消收藏</span>
				</div>
			</div>
		</div>
		<no-results v-if="collectList == 0"></no-results>
  </div>
</template>

<script>
import { CheckIcon } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import NoResults from '@/components/public/NoResults'
import { toDecimal } from '@/utils/mUtils'
import ShopHeader from '@/components/public/ShopHeader'
export default {
	components: {
		ShopHeader,
		CheckIcon,
		NoResults
	},
	data () {
		return {
			isFavourite: false,
			isEdit: false,
		}
	},
	computed: {
		...mapGetters(['collectList', 'allCheckStatus'])
	},
  methods: {
  	...mapActions(['allCheck', 'checked']),
  	unFavourite () {
  		let that = this
  		this.$vux.confirm.show({
  			title: '提示信息',
        content: '确定要删除吗？',
        onConfirm () {
          that.$store.dispatch('delCheck')
          that.isEdit = false
        }
  		})
  	}
  },
  filters: {
  	toDecimal (val) {
  		return toDecimal(val)
  	}
  },
  mounted () {
  	let that = this
		this.$el.onscroll = function () {
  		that.$refs.shopHeader.isShow = false
		}
  } 
}
</script>

<style scoped>
.fav-count {
	padding: 0 15px;
	font-size: 13px;
	color: #666;
	line-height: 40px;
}
.fav-length {
	color: #e4393c;
}
.edit {
	float: right;
	color: #3985ff;
}
.collect-item {
	position: relative;
	background: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}
.collect-item:last-child {
	margin-bottom: 0;
}
.check {
	position: absolute;
	display: flex;
	width: 44px;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 5;
	background: #fff;
	align-items: center;
	justify-content: center;
}
.item-container {
	display: flex;
	padding: 15px;
	position: relative;
}
.collect-item .content {
	flex: 1;
}
.collect-cover {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	margin-right: 8px;
}
.img-holder {
	padding-bottom: 100%;
}
.product-name {
	font-size: 14px;
	color: #333;
	line-height: 20px;
	height: 40px;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.params {
	font-size: 12px;
	color: #999;
	line-height: 25px;
}
.price {
	display: flex;
	align-items: center;
	line-height: 20px;
	padding-top: 3px;
}
.price_val {
	flex: 1;
	color: #e4393c;
	font-size: 18px;
}
.price_val i {
	font-size: 10px;
	font-style: normal;
	display: inline-block;
	padding-right: 2px;
}
.view_more {
	font-size: 12px;
  display: block;
  padding: 0 10px;
  line-height: 20px;
  border-radius: 20px 20px 20px 20px;
  border: 1px solid #3985ff;
  color: #3985ff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.check-icon {
	flex: 0 0 auto;
}
.check-icon *{
	display: inline-block;
	vertical-align: middle;
}
.fav-fixbar-wrapper {
	height: 50px;
}
.fav-fixbar {
	position: fixed;
	bottom: 0;
	height: 50px;
	display: flex;
	width: 100%;
	max-width: 640px;
	z-index: 100;
	background: rgba(255, 255, 255, .95);
	border-top: 1px solid #f1f1f1;
}
.fav-select {
	flex: 1;
}
.unFavourite {
	flex: 0 0 auto;
}
.unFavourite .unfav-btn {
	display: block;
	width: 100%;
	background: #f23030;
	color: #fff;
	height: 50px;
	line-height: 50px;
	min-width: 100px;
	border-radius: 0;
	text-align: center;
}
.fav-select {
	padding: 12px 0 0 15px;
}
.fav-select em {
	position: relative;
	top: 1px;
	font-size: 14px;
	color: #666;
	font-style: normal;
}
</style>
